

<template>
    <div style="">
        <h3 class="my-2 pl-2 border-left-red" :style="{ borderLeft: `3px solid ${data.color}`}">{{data.table_title}}</h3>
        <v-card outlined class="rounded-lg">
            <v-card-text>
                <h3 class="mb-4" :style="{ color: data.color }" >
                    {{data.title}}
                </h3>
                <v-btn
                    depressed
                    dark
                    small
                    class="rounded-pill"
                    :style="{ background: data.color ,color: '#FFFFFF' }"
                >
                    {{data.button_name}}
                </v-btn>
            </v-card-text>
        </v-card>
        <v-btn icon @click="handleClick" style="left: 50px">
            <v-icon>mdi-delete</v-icon>&nbsp;&nbsp;删除组件
        </v-btn>
    </div>
</template>

<script>
import {left} from "@popperjs/core";

export default {
    props: {
        data: {
            type: Object,
        },
        id: {
            type: Number,
        }
    },
    methods: {
        left() {
            return left
        },
        handleClick() {
            this.$emit('del');
        },
    },
};
</script>
